<template>
  <div class="edp-home-api">
    <el-card class="aui-card--fill" :body-style="{padding: '10px'}">
      <div slot="header" class="clearfix">
        <span class="edp-home-api-card-header-title">队列信息管理</span>
        <div class="edp-home-api-card-header-right">
          <el-tooltip class="item" effect="dark" content="新增队列" placement="bottom">
            <el-tag @click="addOrUpdateHandle()"><i class="el-icon-circle-plus-outline"></i></el-tag>
          </el-tooltip>
        </div>
      </div>
      <el-row :gutter="10">
        <el-form label-width="100px">
          <el-col v-for="item in dataList" :key="item.id" :span="8" style="padding-top: 10px;">
            <el-card class="edp-home-api-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span class="edp-home-api-card-header-title">{{item.queueDesc}}</span>
                <div class="edp-home-api-card-header-right">
                  <el-tooltip class="item" effect="dark" content="启用队列" placement="bottom">
                    <el-tag v-if="!item.status" type="success" style="margin-left: 10px;" @click="updateStatus(item)"><i class="el-icon-circle-check"></i></el-tag>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="停用队列" placement="bottom">
                    <el-tag v-if="item.status" type="danger" style="margin-left: 10px;" @click="updateStatus(item)"><i class="el-icon-circle-close"></i></el-tag>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="修改队列" placement="bottom">
                    <el-tag style="margin-left: 10px;" @click="addOrUpdateHandle(item)"><i class="el-icon-edit"></i></el-tag>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除队列" placement="bottom">
                    <el-tag style="margin-left: 10px;" @click="deleteHandle(item.id)"><i class="el-icon-delete"></i></el-tag>
                  </el-tooltip>
                </div>
              </div>
              <div class="api-body">
                <el-row>
                  <el-col :span="14">
                    <el-form-item label="队列编码" prop="queueName">
                      {{item.queueName}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="消费者数量" prop="consumerNum">
                      {{item.consumerNum}}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item label="休眠时间(ms)" prop="sleepMillisecond">
                      {{item.sleepMillisecond}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="休眠最大间隔" prop="sleepMaxInterval">
                      {{item.sleepMaxInterval}}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item label="队列最大值" prop="queueSize">
                      {{item.queueSize}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="队列状态" prop="status">
                      <el-tag v-if="item.status" type="success">启用</el-tag>
                      <el-tag v-if="!item.status" type="danger">停用</el-tag>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-form>
      </el-row>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './apiQueueConf-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        getDataListURL: '/queue/apiQueueConf/page',
        getDataListIsPage: true,
        deleteURL: '/queue/apiQueueConf',
        deleteIsBatch: true,
        exportURL: '/queue/apiQueueConf/export'
      },
      dataForm: {
        queueName: '',
        queueDesc: '',
        status: ''
      }
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandle (row) {
      let id
      if (row) {
        id = row.id
      }
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },
    updateStatus (row) {
      let title
      if (row.status) {
        title = '停用该队列 ---- ' + row.queueName
      } else {
        title = '启用该队列 ---- ' + row.queueName
      }
      this.$confirm(this.$t('prompt.info', { 'handle': title }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        let temp = row
        temp.status = !temp.status
        this.$http.put('/queue/apiQueueConf/', temp).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.$message.success('处理成功')
            this.getDataList()
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" >
.edp-home-api {
  &-card {
    .el-card__header {
      height: 40px;
      padding: 10px 10px;
      line-height: 20px;
    }
    &-header {
      &-title {
        font-size: 16px;
        float: left;
        color: #515a6e;
      }

      &-right {
        float: right;
      }
    }

    &-body {
      color: #515a6e;

      > span {
        font-size: 30px;
      }

      &-txt {
        height: 30px;
        padding-top: 8px;
      }
    }

    &-bottom {
      width: autopx;
      height: auto;
    }
  }

  &-module {
    color: #515a6e;

    &-ico {
      text-align: center;
      font-size: 32px;
      color: rgb(105, 192, 255);
    }

    &-name {
      text-align: center;
      padding-top: 20px;
    }
  }

  // ::v-deep .el-card__header {
  //   padding: 10px 10px;
  // }

  // ::v-deep .el-card__body {
  //   padding: 10px 10px;
  // }

  // ::v-deep .el-divider--horizontal {
  //   margin: 5px 0;
  // }
}

.api-body {
}
</style>
